<template>
    <div>
        <van-sticky>
            <van-search v-model="value" shape="round" background="#4fc08d" placeholder="请输入搜索关键词" />
        </van-sticky>

        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
                <img :src="image" style="width: 100%;height: 200px;" />
            </van-swipe-item>
        </van-swipe>

        <van-grid :column-num="5">
            <van-grid-item icon="photo-o" text="手机" />
            <van-grid-item icon="photo-o" text="平板" />
            <van-grid-item icon="photo-o" text="穿戴" />
            <van-grid-item icon="photo-o" text="声学" />
            <van-grid-item icon="photo-o" text="配件" />
        </van-grid>

        <div class="images">
            <img src="https://img0.baidu.com/it/u=2931243091,718249849&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1734195600&t=7d3895b4a426139c02b1a39f02272655"
                alt="">

            <img src="https://img2.baidu.com/it/u=3565369971,2082314928&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1734195600&t=846c9e5eb8e12e58cbf4961bbf46bce9"
                alt="">
        </div>

    </div>
</template>

<script setup>
const images = [
    'https://img0.baidu.com/it/u=2191392668,814349101&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1734195600&t=cd2f6de860c05e6f049cb7ae5dfc58d4',
    'https://img1.baidu.com/it/u=2522095353,344531116&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1734195600&t=bf129bc8c437fda7c1b3bc6e778421e3',
];
</script>

<style scoped>
.images>img {
    width: 90%;
    height: 150px;
    margin: 5px;
}
</style>